import React, { useState } from 'react';
import { FaRandom } from 'react-icons/fa';

interface Characters {
    uppercase: string;
    lowercase: string;
    numbers: string;
    special: string;
}

const characters: Characters = {
    uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
    lowercase: 'abcdefghijklmnopqrstuvwxyz',
    numbers: '0123456789',
    special: '!@#$%^&*()_+~`|}{[]:;?><,./-='
};

const RandomStringGenerator: React.FC = () => {
    const [length, setLength] = useState<number>(8);
    const [count, setCount] = useState<number>(1);
    const [includeUppercase, setIncludeUppercase] = useState<boolean>(true);
    const [includeLowercase, setIncludeLowercase] = useState<boolean>(true);
    const [includeNumbers, setIncludeNumbers] = useState<boolean>(true);
    const [includeSpecial, setIncludeSpecial] = useState<boolean>(false);
    const [generatedStrings, setGeneratedStrings] = useState<string[]>([]);

    const generateRandomString = (len: number): string => {
        let chars = '';
        if (includeUppercase) chars += characters.uppercase;
        if (includeLowercase) chars += characters.lowercase;
        if (includeNumbers) chars += characters.numbers;
        if (includeSpecial) chars += characters.special;

        if (chars === '') return 'Please select at least one character type';

        return Array(len)
            .fill(null)
            .map(() => chars[Math.floor(Math.random() * chars.length)])
            .join('');
    };

    const handleGenerate = (): void => {
        const newStrings = Array(count)
            .fill(null)
            .map(() => generateRandomString(length));
        setGeneratedStrings(newStrings);
    };

    return (
        <div>
            <h2>Random String Generator <FaRandom /></h2>
            <div>
                <label>
                    Length:
                    <input
                        type="number"
                        value={length}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setLength(Math.max(1, parseInt(e.target.value)))}
                        min="1"
                    />
                </label>
            </div>
            <div>
                <label>
                    Count:
                    <input
                        type="number"
                        value={count}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCount(Math.max(1, parseInt(e.target.value)))}
                        min="1"
                    />
                </label>
            </div>
            <div>
                <label>
                    <input
                        type="checkbox"
                        checked={includeUppercase}
                        onChange={() => setIncludeUppercase(!includeUppercase)}
                    />
                    Uppercase
                </label>
                <label>
                    <input
                        type="checkbox"
                        checked={includeLowercase}
                        onChange={() => setIncludeLowercase(!includeLowercase)}
                    />
                    Lowercase
                </label>
                <label>
                    <input
                        type="checkbox"
                        checked={includeNumbers}
                        onChange={() => setIncludeNumbers(!includeNumbers)}
                    />
                    Numbers
                </label>
                <label>
                    <input
                        type="checkbox"
                        checked={includeSpecial}
                        onChange={() => setIncludeSpecial(!includeSpecial)}
                    />
                    Special Characters
                </label>
            </div>
            <button onClick={handleGenerate}>Generate</button>
            <div>
                <h3>Generated Strings:</h3>
                <ul>
                    {generatedStrings.map((str, index) => (
                        <li key={index}>{str}</li>
                    ))}
                </ul>
            </div>
        </div>
    );
};

export default RandomStringGenerator;
